<template>
    <div class="login">
        <div class="head-logo text-center">
            <img :src="userList.headImgUrl">
        </div>
        <div class="main">
            <div class="group-input">
                <i class="iconfont iconfont-gerenzhongxin"></i>
                <input type="text" class="input" v-model="form.username" placeholder="请输入账号">
            </div>
            <div class="group-input">
                <i class="iconfont iconfont-mima"></i>
                <input type="password" class="input" v-model="form.password" placeholder="请输入密码">    
            </div>   
            <!--<div class="more text-right">-->
                <!--<span class="text">注册</span>-->
                <!--<i>/</i>-->
                <!--<span class="text">忘记密码</span>-->
                <!--<i>/</i>-->
                <!--<span class="text">忘记账号</span>-->
            <!--</div> -->   

            <van-button size="normal" class="btn"   @click.native="jumpLink">普通按钮</van-button>     
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import * as api from './../api/api.js';
export default {
    name:'login',
    data(){
        return {
            form:{
                username:'',
                password:''
            },
            userList:{}
        }
    },
    methods:{
        jumpLink(){
            let vm = this;
            if(vm.form.username==''){
                Toast('账号不能为空');
            }else if(vm.form.password==''){
                 Toast('密码不能为空');   
            }else{
                api.ajaxLogin(vm.form).then(res=>{
                    if(res.data.data=='004'){
                        vm.$router.replace({name:sessionStorage.getItem('urlName')}); 
                    }
                })    
            }
        },
        fetchUser(){
            let vm = this;
            let body={
                openId:sessionStorage.getItem('wxInfo'),
                // openId:'o_2t6wd_R1vLGmFncSKoiKH4ADsI'
            }
            api.getUserInfo(body).then(res=>{
                vm.userList=res.data.data;
            })
        }
    },
    mounted(){
        document.title='绑定账号';
        this.fetchUser();
    },
}
</script>


<style scoped lang="scss">
.login{
    background:url('./../../static/lib/img/login_bg.png') no-repeat;
    background-size:100% 100%;
    padding-top:1.133333rem;
    box-sizing:border-box;
    .head-logo{
        width:100%;
        img{
            width:2.933333rem;
            height:2.933333rem;
            border:0;
            border-radius:50%;
            -moz-box-shadow:0 0 .266667rem #94A88E;
            -webkit-box-shadow:0 0 .266667rem #94A88E; 
            box-shadow:0 0 .266667rem #94A88E;
        }
    }
    .main{
        padding:.266667rem .8rem;
        .group-input{
            width:100%;
            box-sizing:border-box;
            border-bottom:.026667rem solid #7494D5;
            padding:.266667rem .4rem 0;
            margin:.666667rem 0;
            display:flex;
            .iconfont{
                flex:0 0 1rem;
                color:#fff;
                font-size:.666667rem;
            }
            .iconfont-mima{
                margin-top:-4px;
            }
            .input{
                flex:1;
                height:.666667rem;
                border:0;
                background:transparent;
                color:#fff;
                font-size:.426667rem;
                padding-left:.133333rem;
            }
            input::-webkit-input-placeholder{   
                color: #fff;   
            } 

        }
        .more{
            color:#ADBFF1;
            .text{
                margin-left:.08rem;
            }
        }  
        .btn{
            width:100%;
            margin-top:.8rem;
            background:#439EFF;
            border-color:#439EFF;
            color:#fff;
            -moz-box-shadow:0 .026667rem .133333rem #3B7BDF;
            -webkit-box-shadow:0 .026667rem .133333rem #3B7BDF; 
            box-shadow:0 .026667rem .133333rem #3B7BDF;
        }        
    }

}
</style>
